<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bookshop</title>

    <!-- Bootstrap -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/animate.min.css" rel="stylesheet">
    <link href="/assets/css/main.min.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">

    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic'
          rel='stylesheet' type='text/css'>
</head>
<body>

<div id="wrapper" class="">
    <div id="page-content-wrapper" class="st-pusher">
        <div class="st-pusher-after"></div>
        <!-- ============================================== HEADER ============================================== -->

        <jsp:include page="header.jsp"/>


        <!-- ============================================== HEADER : END ============================================== -->
        <div class="home-page-2">

            <!-- ============================================== HOME PAGE SHOWCASE ROOM ============================================== -->
            <div class="slider-2">
                <div class="container">
                    <div class="content">
                        <div class="row">
                            <c:forEach items="${books}" var="book">

                                <div class="col-md-3 col-sm-4" style="cursor: pointer">
                                    <a href="/book/bookDetail?bookId=${book.id}">
                                        <div class="book-cover bk-cover product-book-cover">
                                            <img class="img-responsive" alt="" src="http://47.94.10.67/images/${book.imgUrl}"
                                                 width="182" height="273">
                                            <div class="fade"></div>
                                        </div> <!-- /.book-cover -->
                                    </a>
                                </div><!-- /.col -->

                            </c:forEach>

                        </div><!-- /.row -->
                    </div><!-- /.content.caption -->
                </div><!-- /.container -->
            </div>
            <!-- ============================================== HOME PAGE SHOWCASE ROOM : END ============================================== -->

            <section class="latest-product wow fadeInUp animated"
                     style="visibility: visible; animation-name: fadeInUp;">
                <div id="latest-product" class="module container inner-top-sm">
                    <div class="module-heading home-page-module-heading inner-bottom-vs">
                        <h2 class="module-title home-page-module-title"><span>新书到馆</span></h2>
                    </div>
                    <div class="module-body">
                        <!-- ============================================== NEW ARRIVALS ============================================== -->
                        <div class="book-shelf inner-bottom brown-wooden-shelf">
                            <div class="row">
                                <div class="col-md-10 col-sm-10 center-block clearfix">
                                    <c:forEach items="${newBook}" var="newBook">
                                        <div class="col-md-3 col-sm-4" style="cursor: pointer;">
                                            <div class="book-cover bk-cover product-book-cover">

                                                    <img class="img-responsive" alt="" src="http://47.94.10.67/images/${newBook.imgUrl}"
                                                         width="182" height="273">
                                                <a href="/book/bookDetail?bookId=${newBook.id}">
                                                    <div class="fade"></div>
                                                </a>

                                            </div> <!-- /.book-cover -->
                                        </div><!-- /.col -->
                                    </c:forEach>


                                </div>
                            </div>
                        </div>
                        <!-- ============================================== NEW ARRIVALS : END ============================================== -->
                    </div>
                </div>
            </section>

            <div class="container wow fadeInUp outer-top-small" style="visibility: hidden; animation-name: none;">
                <!-- ============================================== NEW PRODUCTS ============================================== -->
                <section class="best-seller">
                    <div id="best-seller" class="module">
                        <div class="module-heading home-page-module-heading">
                            <h2 class="module-title home-page-module-title"><span>为您推荐</span></h2>

                        </div><!-- /.module-heading -->
                        <div class="module-body">
                            <div class="row books full-width">
                                <div class="clearfix text-center">
                                    <c:forEach items="${recommend}" var="recommend">
                                        <div class="col-md-3 col-sm-4">
                                            <div class="book">
                                                <a href="single-book.html">
                                                    <div class="book-cover">
                                                        <img width="140" height="212" alt="" src="http://47.94.10.67/images/${recommend.imgUrl}"/>
                                                    </div>
                                                </a>
                                                <div class="book-details clearfix">
                                                    <div class="book-description">
                                                        <h3 class="book-title"><a href="single-book.html">${recommend.name}</a></h3>
                                                        <p class="book-subtitle">作者：<a href="single-book.html"> ${recommend.author}</a></p>
                                                    </div>
                                                    <div class="text-center">
                                                        <div class="actions">
                                                            <a href="/book/bookDetail?bookId=${recommend.id}">
                                                                <span class="book-price price">浏览详情</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </c:forEach>

                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- ============================================== NEW PRODUCTS : END ============================================== -->
            </div><!-- /.container -->


        </div><!-- /.home-page -->
        <!-- ============================================== FOOTER ============================================== -->
        <footer class="footer clearfix">
            <div class="margin-top-10">
                <div class="container inner-top-vs">
                    <!-- ============================================== FOOTER-TOP ============================================== -->
                    <div class="row">
                        <div class="col-md-3 col-sm-4">
                            <div class="footer-module">
                                <h4 class="footer-module-title">About this site</h4>
                                <div class="footer-module-body m-t-20 clearfix">
                                    <p><span class="pull-left"><img src="/assets/images/footer-logo.png" alt=""
                                                                    width="75" height="75"></span>A cras tincidunt, ut
                                        tellus et. Gravida scele risque, ipsum sed iacul is, nunc non namtellus.
                                        Placerat sed phasellus, purus purus elit. Cras ante eros. Erat vel. Donec
                                        vestibulum sed, vel euismod donec. </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-4">
                            <div class="footer-module">
                                <h4 class="footer-module-title">Categories</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">Books</a></li>
                                        <li><a href="#">Text books</a></li>
                                        <li><a href="#">Nook books</a></li>
                                        <li><a href="#">Audiobooks</a></li>
                                        <li><a href="#">Magazines</a></li>
                                    </ul>

                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">Movies</a></li>
                                        <li><a href="#">Music</a></li>
                                        <li><a href="#">Games</a></li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-4 clearfix ">
                            <div class="footer-module">
                                <h4 class="footer-module-title">Information</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">Track Order</a></li>
                                        <li><a href="#">Delivery</a></li>
                                        <li><a href="#">Return Policy</a></li>
                                        <li><a href="#">Giftcards</a></li>
                                    </ul>

                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">联系我们</a></li>
                                        <li><a href="#">商店位置</a></li>
                                        <li><a href="#">常问问题</a></li>
                                        <li><a href="#">使用条款</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12">
                            <div class="footer-module">
                                <h4 class="footer-module-title">连</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="clearfix list-unstyled footer-social-contact">
                                        <li><a href="#" class="fa fa-facebook" title="Facebook的"></a></li>
                                        <li><a href="#" class="fa fa-pinterest" title="Pinterest的"></a></li>
                                        <li><a href="#" class="fa fa-linkedin" title="LinkedIn"></a></li>
                                        <li><a href="#" class="fa fa-twitter" title="推特"></a></li>
                                        <li><a href="#" class="fa fa-google-plus" title="Google Plus"></a></li>
                                        <li><a href="#" class="fa fa-rss" title="RSS"></a></li>
                                        <li><a href="#" class="fa fa-instagram" title="Instagram的"></a></li>

                                    </ul>

                                    <div class="inner-top-xs">
                                        <p>订阅我们的每周时事通讯。</p>
                                        <form class="searchform" action="http://inspectelement.com/" method="get">
                                            <input class="s" type="text" placeholder="Email Address" name="s" value="">
                                            <input class="searchsubmit" type="submit" value="订阅">
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================== FOOTER-TOP : END ============================================== -->
                    <hr>
                    <!-- ============================================== FOOTER-BOTTOM ============================================== -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="pull-left">
                                <ul class="payment-list list-unstyled">
                                    <li><a href="#"><img src="/assets/images/payments/1.png" class="img-responsive"
                                                         height="22" alt=""></a></li>

                                </ul>
                            </div>

                        </div>
                    </div>
                    <!-- ============================================== FOOTER-BOTTOM : END ============================================== -->
                </div>
            </div>
        </footer>
        <!-- ============================================== FOOTER : END ============================================== -->
    </div><!-- /.st-pusher -->
    <!-- ============================================== TOGGLE RIGHT CONTENT ============================================== -->
    <c:if test="${sessionScope.current_user == null}">
        <jsp:include page="needLogin.jsp"/>
    </c:if>
    <c:if test="${sessionScope.current_user != null}">
        <jsp:include page="content.jsp"/>
    </c:if>


    <!-- ============================================== TOGGLE RIGHT CONTENT : END ============================================== -->



</div><!-- /#wrapper -->

<script src="/assets/js/jquery-1.11.2.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/perfect-scrollbar.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/jquery.customSelect.min.js"></script>
<script src="/assets/js/jquery.easing-1.3.min.js"></script>
<script src="/assets/js/wow.min.js"></script>
<script src="/assets/js/echo.min.js"></script>
<script src="/assets/js/scripts.js"></script>
</body>
</html>
<script type="text/javascript">
    $("#myBook").on('click', '#backBook', function () {
        var bookId = $(this).prevAll("#backBookId").val();
        if (!confirm("确定归还该图书吗？")) {
            return false;
        }
        $.ajax({
            url:'/borrow/backBook?bookId=' + bookId,
            dataType:'JSON',
            type:'GET',
            success:function (result) {
                if (result.code == 200) {
                    alert(result.msg);
                    window.location.reload();
                } else {
                    alert(result.msg)
                    return;
                }
            }
        })
    });
</script>